<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
const emits=defineEmits(['delete','update'])// 定义事件
const sendToParent=(id:string)=>{
  const data={id:id}// 发送数据
  emits('delete',data)
}
import _ from 'lodash'
const props = defineProps<{
  list: any[]
}>()
// 定义数据
const container = ref<HTMLDivElement | null>(null)// 定义容器
const vlist = ref<HTMLDivElement | null>(null)// 定义列表
const containerHeight = ref(0)// 定义容器高度
const itemHeight = ref(0) // 改为响应式变量（初始为0，后续动态测量）
const startIndex = ref(0)// 定义起始索引
const endIndex = ref(0)// 定义结束索引
const pageItems = ref(0)// 定义每页显示的项数
const offset = ref(0)// 定义偏移量

// 定义方法
const handleScroll = _.throttle(() => {
  if (!container.value || itemHeight.value === 0) return // 避免高度未测量时计算错误
  const scrollTop = container.value.scrollTop
  const newStartIndex = Math.floor(scrollTop / itemHeight.value) // 使用动态高度

  // 限制 scrollTop 在合理的范围内
  startIndex.value = Math.max(0, newStartIndex)
  endIndex.value = Math.min(startIndex.value + pageItems.value, props.list.length)
  if (endIndex.value < props.list.length - 1) {// 还有更多数据
    endIndex.value += 1
  }
  // 更新偏移量（使用动态高度）
  offset.value = startIndex.value * itemHeight.value
}, 16) // 使用 16ms(60fps) 的节流函数

// 定义生命周期
onMounted(() => {
  if (container.value && props.list.length > 0) {
    // 获取容器高度
    containerHeight.value = container.value.parentElement?.offsetHeight as number

    // 测量第一个列表项的实际高度（假设所有项高度一致）
    // 注意：需等待列表渲染完成后测量，可通过 $nextTick 确保 DOM 更新
    setTimeout(() => { // 简单延迟确保 DOM 渲染完成（更严谨方案用 nextTick）
      const firstItem = container.value?.querySelector('li');
      if (firstItem) {
        itemHeight.value = firstItem.offsetHeight; // 动态设置高度（包含 padding 和 border）
      }
      // 计算每页显示的项数（使用动态高度）
      pageItems.value = Math.ceil(containerHeight.value / itemHeight.value)
      endIndex.value = pageItems.value // 初始时只显示一页
    }, 0);
  }
})

// 定义计算属性
const detaList = computed(() => props.list.slice(startIndex.value, endIndex.value + 1))
</script>
<template>
  <div ref="container" class="container" :style="{
    overflow: 'auto',// 允许滚动
    height: `${containerHeight}px`,// 设置容器高度
    position: 'relative',// 相对定位
  }" @scroll="handleScroll">
    <!-- 总高度根据动态 itemHeight 计算 -->
    <div :style="{ height: `${itemHeight * props.list.length}px` }"></div>
    <div ref="vlist" :style="{
      position: 'absolute',// 绝对定位
      top: 0,
      left: 0,
      right: 0,
      transform: `translateY(${offset}px)`,// 平移列表（使用动态偏移量）
    }">
      <ul style="list-style: none; padding: 0; margin: 0;">
        <!-- 移除固定 height，让内容自动撑开（或保留动态绑定） -->
        <li v-for="item in detaList" :key="item._id" :style="{ padding: '5px', borderBottom: '1px solid #eee' }">
          <div>
            <h4 v-if="item.course_name">课程名称：{{ item.course_name }}</h4>
            <p>{{ item.description }}</p>
            <h4 v-if="item.student_id">学生学号：{{ item.student_id }}</h4>
            <p v-if="item.student_name">学生姓名：{{ item.student_name }}</p>
          </div>
          <div>
            <button @click="sendToParent(item._id)">删除</button>
            <button>编辑</button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped></style>